{% extends 'layout.html' %}

{% block css %}
    {#美化表格#}
    <style>    table {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
    }

    th, td {
        padding: 12px;
        text-align: left;
        border: 1px solid #ddd;
    }

    th {
        background-color: #f4f4f4;
        font-weight: bold;
    }

    tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    tr:hover {
        background-color: #f1f1f1;
    }
    </style>
{% endblock %}

{% block content %}
    <h1>Data Preview</h1>
    <table border="1">
        <tr>
            {% for key in data.0.keys %}
                <th>{{ key }}</th>
            {% endfor %}
        </tr>
        {% for row in data %}
            <tr>
                {% for value in row.values %}
                    <td>{{ value }}</td>
                {% endfor %}
            </tr>
        {% endfor %}
    </table>

    <!-- Single button -->
    <div class="btn-group">
        <form action="/system/customize/visualization" method="GET">
            <input type="hidden" name="file" value="{{ file_name }}"></input>

            <label>
                横轴
                <select class="form-control" name="x_label">
                    {% for key in data.0.keys %}
                        <option>{{ key }}</option>
                    {% endfor %}

                </select>
            </label>
            <label>
                纵轴
                <select class="form-control" name="y_label">
                    {% for key in data.0.keys %}
                        <option>{{ key }}</option>
                    {% endfor %}
                </select>
            </label>
            <label>
                图形
                <select class="form-control" name="type_label">
                    <option>bar</option>
                    <option>line</option>
                    <option>scatter</option>
                </select>
            </label>
            <button type="submit" class="btn btn-default">提交</button>

        </form>

    </div>


{% endblock %}

{#<!DOCTYPE html>#}
{#<html>#}
{#<head>#}
{#    <title>Show Data</title>#}
{#</head>#}
{#<body>#}
{#    <h1>Data Preview</h1>#}
{#    <table border="1">#}
{#        <tr>#}
{#            {% for key in data.0.keys %}#}
{#                <th>{{ key }}</th>#}
{#            {% endfor %}#}
{#        </tr>#}
{#        {% for row in data %}#}
{#            <tr>#}
{#                {% for value in row.values %}#}
{#                    <td>{{ value }}</td>#}
{#                {% endfor %}#}
{#            </tr>#}
{#        {% endfor %}#}
{#    </table>#}
{#    #}
{#    #}
{#    #}
{#    <a href="#">Visualize Data</a>#}
{#</body>#}
{#</html>#}